<template>
	<view class="seat-box">
		<view class="header" id="header">
			<view class="header-con" :style="{paddingTop: systemBarHeight + 'px'}">
				<!-- 返回 -->
				<image class="back" src="/static/images/left.png" @click.stop="backPage"></image>
				<!-- 内容 -->
				<view class="title">HANOI - LEBERA</view>
			</view>
			<view class="mess">11 MAR - 15 MAR</view>
		</view>
		<view class="content" :style="{marginTop: headerHeight + 'px'}">
			<view class="content-top">
				<view class="name">Choose your seat</view>
				<view class="charriage">Charriage <view class="room-num">{{room}}</view>
				</view>
			</view>
			<view class="content-bottom">
				<seat-selection :seat="seat" @activeRoom="activeRoomChange" @submitPay="payChange"/>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import SeatSelection from '@/components/seatSelection/index.vue'
	import {
		onMounted,
		reactive,
		toRefs,
		nextTick
	} from "vue";

	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		seatList,
		paySeat
	} from '@/api/seat.js'
	
	interface dataType {
		room : string;
		seat : object;
		systemBarHeight : number;
		headerHeight : number;
	}
	
	// 声明变量集合
	const data: dataType = reactive({
		systemBarHeight: 0,
		// 选座数据对象
		seat: {},
		// 播放厅
		room: '01',
		// 头部高度
		headerHeight: 0
	})

	const {
		seat,
		systemBarHeight,
		room,
		headerHeight
	} = toRefs(data)

	onLoad(() => {
		// 获取数据
		getData()
	})
	
	onMounted(() => {
		getSysteminfo()
		nextTick(() => {
			// 获取header的高度
			const query = uni.createSelectorQuery().in(this);
			query.select('#header').boundingClientRect(res => {
				data.headerHeight = res.height
			}).exec();
		})
	})

	const getData = () => {
		seatList().then((res: any) => {
			if (res.code === 200) {
				data.seat = res.data
			} else {
				data.seat = {}
			}
		})
	}

	const getSysteminfo = () => {
		uni.getSystemInfo({
			success: res => {
				// 获取手机菜单栏的高度
				data.systemBarHeight = res.statusBarHeight;
			}
		});
	}

	// 返回
	const backPage = () => {
		uni.navigateBack({
			delta: 1
		});
	}

	// 选中的播放厅
	const activeRoomChange = (val : string) => {
		data.room = val
	}
	
	// 购买
	const payChange = (val: number) => {
		uni.showModal({
			title: '提示',
			content: '确定购买？',
			success: function (res) {
				if (res.confirm) {
					paySeat({payArr: val}).then((res: any) => {
						if (res.code === 200) {
							getData()
						} else {
							uni.showToast({
								title: '购买失败，稍后再试！',
								duration: 2000
							})
						}
					})
				} else if (res.cancel) {
					console.log('取消')
				}
			}
		})
		
	}
</script>

<style scoped>
	.seat-box {
		color: #fff;
	}

	.header {
		width: 100%;
		color: #fff;
		position: fixed;
		padding: 36.5rpx 0 54.75rpx 0;
		top: 0;
		background-color: #050110;
	}

	.header-con {
		display: flex;
		justify-content: space-between;
	}

	.back {
		height: 36.5rpx;
		width: 36.5rpx;
		margin-left: 18.25rpx;
		margin-right: 18.25rpx;
	}

	.title,
	.mess {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.mess {
		font-size: 23.72rpx;
		color: #afb0c4;
		margin-top: 18.25rpx;
	}

	.content {
		padding: 0 27.37rpx;
	}

	.content-top {
		padding: 54.74rpx 0 18.25rpx;
		border-bottom: 1.82rpx solid #646570;
		line-height: 72.99rpx;
	}

	.charriage {
		display: flex;
		align-items: center;
	}

	.room-num {
		color: #f76c67;
		margin-left: 27.37rpx;
	}

	.content-bottom {}
</style>